
<extend name="Public/base" />
<!-- 界面样式 -->
<block name="style">
    <link rel="stylesheet" href="__PUBLIC__/Admin/css/dropload.css">
         <style>
    {
        margin: 0;
        padding:0;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust:none;
    }
    html{
        font-size:10px;
    }
    body{
        background-color: #f5f5f5;
        font-size: 1.2em;
    }
    .outer{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction:column;
        -webkit-box-orient:vertical;
        box-orient:vertical;
        -webkit-flex-direction:column;
        flex-direction:column;
    }
    .header{
        position: relative;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
    }
    .header h1{
        text-align: center;
        font-size: 2rem;
        font-weight: normal;
    }
    .header .btn{
        position: absolute;
        right: 0;
        top: 0;
        width: 4em;
        height: 100%;
        text-align: center;
        color: #06c;
        font-size: 1.4rem;
        background-color: #ccc;
    }
    .header .btn:active{
        background-color: #aaa;
        color: #fff;
    }
    .inner{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .inner .item{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align:center;
        -webkit-box-align:center;
        box-align:center;
        -webkit-align-items:center;
        align-items:center;
        padding:3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
    }
    .inner .item img{
        display: block;
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
    }
    .inner .item h3{
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin: 0 10px;
        font-size: 1.2rem;
    }
    .inner .item .date{
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
    }
    .opacity{
        -webkit-animation: opacity 0.5s linear;
        animation: opacity 0.5s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    </style> 
</block>
<block name="body">


    <div class="weui_panel">
        <div class="weui_panel_hd">精品文章</div>
        <div class="weui_panel_bd">
            <div class="weui_media_box weui_media_small_appmsg">
                <div class="weui_cells weui_cells_access">
                   <div class="inner">
                   <div class="lists">

                </div>
                </div>
                </div>
            </div>
        </div>
    </div>




</block>
<!-- 脚本代码必须写在   block name="script" 标签里 -->
<block name="script">
 <script src="__PUBLIC__/Admin/js/dropload.min.js"></script>
<script type="text/javascript">
var gourl='{:U("/News/newslist",array("cat_id"=>$catid))}';
$(function(){
    var pageNow =1;
    var dropload = $('.inner').dropload({
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
          /*  domRefresh : "",*/
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            /*domLoad : "",*/
            domNoData  : '<div class="dropload-noData">暂无数据</div>'
         /*   domNoData :""*/
        },
        scrollArea : window,
        loadUpFn : function(me){
            $.ajax({
                type: 'GET',
                url: gourl, 
                success: function(data){
                    var data =  $.parseJSON(data);
                    var result = '';
                   for(var i = 0; i < data.length; i++){
                        result +=   '<a class="weui_cell" href="'+data[i]['url']+'">'
                                    +'<div class="weui_cell_bd weui_cell_primary">'
                                    +'<p>'+data[i]['title']+'</p>'
                                    +'</div>'
                                    +'<span class="weui_cell_ft"></span>'
                                    +'</a>';
                    }
                    //me.loading = false;
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        dropload.resetload();
                        dropload.unlock();
                         pageNow =2;
                           
               
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        },
        loadDownFn : function(me){ 
            $.ajax({
                type: 'GET',
                url: gourl, 
               data:{pageNow:pageNow},
                success: function(data){
                if(data == ""){
                       $('.dropload-down').show();
                        //dropload.lock();
                        dropload.noData();
                       dropload.resetload();
                       setTimeout(function(){
                          $('.dropload-down').hide();
                       },1000)
                }else{
                  
                    var data = $.parseJSON(data);
                    var result = '';
                   for(var i = 0; i < data.length; i++){
                        result +=  '<a class="weui_cell" href="'+data[i]['url']+'">'
                                    +'<div class="weui_cell_bd weui_cell_primary">'
                                    +'<p>'+data[i]['title']+'</p>'
                                    +'</div>'
                                    +'<span class="weui_cell_ft"></span>'
                                    +'</a>';
                    }
                        $('.lists').append(result);
                        pageNow ++;
              /*          if(data.length < 20 ){
                            dropload.lock();
                            dropload.noData();
                        }*/
                        dropload.resetload();

                  }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        }
    });
});
</script>        
  
     
</block>